<template>
  <div class="back2">
    <div class="back1">
      <div class="login">
        <h1 class="letter">Login</h1>
        <input class="shuru" v-model="email" type="email" placeholder="Username" />
        <input class="shuru" v-model="password" type="password" placeholder="Password" />
        <button class="DengLu" @click="send">login</button>
        <button class="ZhuCe" @click="jump">Register>></button>
      </div>
    </div>
  </div>
</template>


<script>
import { Login, QueryUserInfo } from '../request'
// import '@arco-design/web-vue/dist/arco.css';
export default {
  name: "UserLogin",
  components: {

  },
  data () {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    send () {
      let that = this
      console.log('deng lu nie')
      this.$message.info('登录中')
      if(that.email == 'normal' && that.password == '123456'){
          this.$message.success('登录成功, 跳转中')
          this.$router.push({
            path: "/",
            query: {
              islogin: true
            }
          })
      }else if(that.email == 'admin'){
      Login( {
        "username": that.email,
        "password": that.password
      }).then(res => {
        localStorage.setItem('token', res.data.token);
        QueryUserInfo(that.email).then(res=>{
          localStorage.setItem('profile', JSON.stringify(res.data))
          this.$message.success('登录成功, 跳转中')
          this.$router.push("/")    //改传toB
        }).catch(error=>{
          this.$message.error('出错啦: ' + error.response.data.msg)
        })
      }).catch(error => {
        this.$message.error('出错啦: ' + error.response.data.msg)
      })
    }
    },    
      jump(){
      this.$router.push("/reg")
    }


  }
}
</script>






<style scoped>
.back1{
  position: fixed;
  top: 10%;
  left: 45%;
}
.back2 {
  background-image: url("../assets/login-bg.jpg");
  background-repeat: no-repeat;
  background-size:100% 100%;
  width:100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  margin: 0;
}
.login {
  background-color: rgba(255, 255, 255, 0.5);
  width: 400px;
  height: 600px;
  position: relative;
  top:10%;
  left:60%;
}
.letter {
  color: #585858;
  font-weight: 400;
  padding: 50px;
  margin: 25px 0 100px 0;
  text-indent: 1.5em;
  letter-spacing: 0.2em;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}
.shuru {
  background-color: rgba(255, 255, 255, 0);
  border-bottom: 2px solid #888888 ;
  outline: none;
  position: relative;
  margin: 30px auto;
  display: block;
  width: 250px;
  height: 50px;
}
.DengLu {
  width: 250px;
  height: 30px;
  color: beige;
  padding: 5px;
  margin: 20px auto;
  background: linear-gradient(
    to right,
    #e7c0b9,
    #95afd2
  );
  display: block;
  outline: none;
  border: 0;
  font-weight: 700;
  cursor: pointer;
}
.ZhuCe {
  color: #585858;
  padding: 2.5px 20px;
  margin: 50px auto;
  background-color: #b2d9d6;
  display: block;
  outline: none;
  border: 0;
  font-weight: 700;
  position: relative;
  float: right;
  transform: translateX(15px);
  cursor: pointer;
}
</style>